import { FC } from "react";
import { Avatar, Checkbox } from "antd";
import "./index.scss";
import { CheckboxChangeEvent } from "antd/es/checkbox";

type PropType = {
  frendId: string;
  avatar: string;
  frendName: string;
  showCheckbox?: boolean;
  checked?: boolean;
  onClick?: any;
  onSelect?: any;
};
const Frend: FC<PropType> = (props): JSX.Element => {
  const { frendId, avatar, frendName, showCheckbox, checked, onClick, onSelect } = props;
  const DisplayComponent = () => {
    if (showCheckbox) {
      return (
        <Checkbox
          checked={checked}
          onChange={(e: CheckboxChangeEvent) => onSelect(frendId, e.target.checked)}
        >
          <div className="info">
            <Avatar size={32}>{frendName.charAt(0)}</Avatar>
            {/* <Avatar size={32} src={avatar} /> */}
            <div className="frendName">{frendName}</div>
          </div>
        </Checkbox>
      );
    } else {
      return (
        <div className="info">
          <Avatar size={32}>{frendName.charAt(0)}</Avatar>
          {/* <Avatar size={32} src={avatar} /> */}
          <div className="frendName">{frendName}</div>
        </div>
      );
    }
  };
  return (
    <div className="frend-item" onClick={() => onClick && onClick(frendId)}>
      {DisplayComponent()}
    </div>
  );
};

export default Frend;
